import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {

	search = async () => {
		// 发布消息，'atguigu'订阅的名， 第二参数是：发布的消息数据
		// PubSub.publish('atguigu', {name:'tom', age: 18})

		// 获取用户输入
		const {keyWordElement: {value: keyWord}} = this
		// 发送请求前通知List更新状态
		PubSub.publish('atguigu', {isFirst:false, isLoading:true})

		//#region // 发送网络请求 -- axios发送请求
		// axios.get(`/api1/search/users?q=${keyWord}`).then(
		// 	response => {
		// 		// 发送请求成功后通知List更新状态
		// 		PubSub.publish('atguigu', {isLoading:false, users:response.data.items, err: ''})
		// 	},
		// 	error => {
		// 		// 请求失败后通知List
		// 		PubSub.publish('atguigu', {isLoading:false, err:error.message})
		// 	}
		// )
		// #endregion


		// 发送网络请求---fetch
		// 联系服务器成功，但是服务器响应成功和不成功就不知道了
		// fetch(`/api1/search/users2?q=${keyWord}`).then(
		// 	response => {
		// 		console.log('联系服务器成功了');
		// 		return response.json()
		// 	},
		// 	error => {
		// 		console.log('联系服务器失败了', error);
		// 		// return new Promise(()=>{}) 
		// 	}
		// ).then(
		// 	response => {console.log('获取数据成功', response)},
		// 	// error => {console.log('获取数据失败了', error)}
		// ).catch(
		// 	(error)=>{
		// 		console.log("请求失败：", error)
		// 	}
		// )

		// catch,,只要获取请求异常就都会到这里，异常穿透
		// 优化
		try {
			const response = await fetch(`/api1/search/users2?q=${keyWord}`)
			const data = await response.json()
			PubSub.publish('atguigu', {isLoading:false, users:data.items, err: ''})
		} catch (error) {
			console.log("请求出错", error)
			PubSub.publish('atguigu', {isLoading:false, err:error.message})
		}
		
	}

	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">搜索github用户</h3>
				<div>
					{/* 非受控组件 */}
					<input ref={c => {this.keyWordElement = c}} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
					<button onClick={this.search}>搜索</button>
				</div>
			</section>
		)
	}
}
